﻿@page "/emoji"

@if (emojis == null)
{
    <Loading />
}
else
{
    <div class="post-wrap emoji-box">
        <div class="emoji-search">
            <input type="text" placeholder="输入关键字进行搜索" @bind="@keyword" @oninput="Search" />
            <button @onclick="Reset">RESET</button>
        </div>
        <div class="emoji-content">
            @foreach (var item in emojis.GroupBy(x => x.Category))
            {
                <h2>@item.Key</h2>
                <div class="emoji-item plus-col-xs12">
                    @foreach (var emoji in item)
                    {
                        <NavLink class="plus-col-xs12 plus-col-md3"
                                 title="@(string.Join(" ", emoji.Keywords))">
                            @emoji.Char<span>:@emoji.Name:</span>
                        </NavLink>
                    }
                </div>
            }
        </div>
    </div>
}

@code {
    private string keyword;

    private ServiceResult<IEnumerable<EmojiDto>> result;

    private IEnumerable<EmojiDto> emojis;

    protected override async Task OnInitializedAsync()
    {
        await Common.SetTitleAsync("Emoji");

        result = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<EmojiDto>>>("/common/emojis");
        emojis = result.Result;
    }

    private void Search(ChangeEventArgs e)
    {
        emojis = null;

        keyword = (string)e.Value;
        if (string.IsNullOrEmpty(keyword))
        {
            Reset();
            return;
        }

        emojis = result.Result.Where(x => x.Name.Contains(keyword) ||
                                          x.Keywords.Contains(keyword) ||
                                          x.Char == keyword).ToList();
    }

    private void Reset()
    {
        emojis = null;
        keyword = null;
        emojis = result.Result;
    }
}